$(function () {
  // 图表1 
  // 1- 指定图表父容器 ，创建echarts实例 
  var myChart1 = echarts.init(document.getElementById('c1'));

  // 2-指定图表相关设置和数据
  var option1 = {
    // 标题 
    title: {
      text: '2020年注册人数'
    },
    // 提示工具 
    tooltip: {},
    // 图例
    legend: {
      data: ['销量', '人数']
    },
    // x轴
    xAxis: {
      data: ["一月", "二月", "三月", "四月", "五月", "六月"]
    },
    // y轴 ： 会根据数据智能生成 
    yAxis: {},
    // 系列： 
    series: [
      {
        name: '销量',
        type: 'bar', //bar 柱图 line 线图 pie 饼图 
        data: [5, 20, 56, 10, 10, 20]
      },
      {
        name: '人数',
        type: 'line',
        data: [25, 10, 30, 60, 20, 50]
      }
    ]
  };

  // 3- 将数据交给 echarts实例进行绘制 
  myChart1.setOption(option1);

  // 图表2
  // 1- 指定图表父容器 ，创建echarts实例 
  var myChart2 = echarts.init(document.getElementById('c2'));

  // 2-指定图表相关设置和数据
  var option2 = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      left: 'right',
      orient: 'vertical',
      x: 'left',
      data: ['阿迪', '解放', '老北京', '回力', '双星']
    },
    series: [
      {
        name: '热销品牌',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          { value: 335, name: '阿迪' },
          { value: 310, name: '解放' },
          { value: 234, name: '老北京' },
          { value: 135, name: '回力' },
          { value: 1548, name: '双星' }
        ]
      }
    ]
  };

  // 3- 将数据交给 echarts实例进行绘制 
  myChart2.setOption(option2);
})